<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示数据库</title>
    <script src="/pub/js/ly.import.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside style="height: calc(100% - 20px);">
            <el-container>
                <el-header class="cline" style="padding: 0px 10px;justify-content: normal;">
                    <h3>演示数据库</h3>
                    <el-link @click="help=true" style="margin: 0px 20px">使用指南</el-link>
                </el-header>
                <el-main style="padding: 0px; height: calc(100% - 60px);">
                    <el-menu @select="doMenu" v-model="ac.menu">
                        <template v-for="m in menus">
                            <el-submenu v-if="m.menus" :index="m.title">
                                <template slot="title">
                                    <div class="cline">
                                        <span class="el-icon-folder"> {{m.title}}</span>
                                        <div>
                                            <el-link style="margin-right: 5px" @click.stop.prevent="downGroup(m)" :underline="false">下载</el-link>
                                            <el-link style="margin-right: 20px" @click.stop.prevent="showIndex(m)" :underline="false">演示</el-link>
                                        </div>
                                    </div>
                                </template>
                                <el-menu-item v-for="sm in m.menus" :index="sm.table.name">
                                    <div :title="'演示ID至: ' + sm.maxid" class="el-icon-coin"
                                         :style="{backgroupColor:sm.table.name==ac.menu?'#C3D9FF':''}"> {{sm.title}}
                                    </div>
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="m.table.name">
                                <div :title="'演示ID至: ' + m.maxid" class="el-icon-coin"
                                     :style="{backgroupColor:m.table.name==ac.menu?'#C3D9FF':''}"> {{m.title}}
                                </div>
                            </el-menu-item>
                        </template>
                    </el-menu>
                </el-main>
            </el-container>
        </el-aside>
        <el-main style="height: 100%; padding: 0px; overflow: hidden;" :style="{opacity: t.name=='demo_table'?0.3:1}">
            <el-tabs v-model="ac.tab" style="height: calc(100% - 40px);">
                <el-tab-pane label="表数据" name="表数据">
                    <iframe id="ifdata" :src="'table.html?'+t.name+'#'+t.comment"
                            style="height: 100%; width: 100%; border-width: 0px"></iframe>
                </el-tab-pane>
                <el-tab-pane label="表结构" name="表结构">
                    <el-table :data="columns" :header-cell-style="hrtdStyle" :cell-style="hrtdStyle">
                        <el-table-column prop="name" label="字段名" width="120px"></el-table-column>
                        <el-table-column prop="type" label="类型" width="120px"></el-table-column>
                        <el-table-column prop="key" label="主键" width="90px" align="center">
                            <div slot-scope="s">
                                {{s.row.key=='PRI' ? '是' : ''}}
                            </div>
                        </el-table-column>
                        <el-table-column prop="nullable" label="可为空" width="90px" align="center">
                            <div slot-scope="s">
                                {{s.row.nullable=='NO' ? '否' : ''}}
                            </div>
                        </el-table-column>
                        <el-table-column prop="comment" label="描述"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="AJAX地址" name="AJAX地址">
                    <p v-for="u in urls" class="cline" style="width: 600px">
                        <span>
                            <label>{{u.name}}</label>
                            <a class="el-link el-link--default" :href="`/easy/${t.name}/${u.url}`"
                               target="_blank" @click.prevent="openUrl($event)">
                                {{location.origin+`/easy/${t.name}/${u.url}`}}
                            </a>
                        </span>
                        <el-button @click="cp(`${t.name}/down`)" size="mini" icon="el-icon-document-copy">复制地址</el-button>
                    </p>
                    <hr>
                    <dl>
                        <dt style="margin-left: 20px;">使用指南</dt>
                        <dd><helper></helper></dd>
                    </dl>
                </el-tab-pane>
                <el-tab-pane v-if="t.hasHtml" label="演示" name="演示">
                    <iframe :src="t.htmldir+'/index.html'"
                            style="height: 100%; width: 100%; border-width: 0px"></iframe>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
    <el-dialog title="使用指南" :visible.sync="help" width="80%">
        <helper></helper>
    </el-dialog>
</div>
<script>
    Vue.component("helper",{
        template : `
        <ol>
            <li>演示库表提供基本增删改查操作功能</li>
            <li>操作请求方式使用 AJAX 方式， 返回 JSON 格式数据</li>
            <li>请求地址格式统一为: /easy/表名/操作名?参数列表</li>
            <li>数据库表字段名对应请求参数名，写错的参数名会被忽略</li>
            <li>条件查询：/easy/表名/list?参数列表， 用于查询列表数据
                <small>实现了组合条件查询，返回类型为数组， 参考格式：
                    [ {...} , {...} , {...} , ... ]
                </small>
            </li>
            <li>分页查询：/easy/表名/page?参数列表， 用于查询分页数据
                <small>在条件查询的基础上，扩展了分页查询参数：page(第几页)，size(每页行数)
                    返回 Page 对象， total 为总记录数， rows 为当前页数据， 参考格式：<br>
                    { total : 1000 , rows : [ {...} , {...} , {...} , ... ] }
                </small>
            </li>
            <li>主键查询：/easy/表名/get?id=xxx，根据主键查询单行数据
                <small>返回 Result 对象, data 属性为查询到的数据，参考格式：
                    { code : 1 , msg : "xxx" , data : { .... } }
                </small>
            </li>
            <li>保存数据：/easy/表名/save?参数列表， 不传主键为新增，否则根据主键修改
                <small>返回 Result 对象， code==1 成功， 否则失败，参考格式：
                    { code : 1 , msg : "xxx" , data : { .... } }
                </small>
            </li>
            <li>删除数据：/easy/表名/remove?id=xxx， 删除指定主键的记录
                <small>返回 Result 对象， code==1 成功， 否则失败， 参考格式：
                    { code : 1 , msg : "xxx" , data : { .... } }
                </small>
            </li>
        </ol>
        `
    })
    var v = new Vue({
        el: "#app",
        data: {
            urls: [/*{name: '列表查询', url: 'list'},*/
                {name: '主键查询', url: 'get'},
                {name: '分页查询', url: 'page'},
                {name: '保存数据', url: 'save'},
                {name: '删除数据', url: 'remove'}],
            ac: {tab: "表数据", menu: ""},
            tables: [], columns: [], help: false, t: {name: 'demo_table', comment: '演示数据库表'}
        },
        created() {
            axios.get("/easy/tables").then(res => this.tables = res.data);
        },
        computed: {
            menus() {
                let menus = [];
                this.tables.forEach(t => {
                    let items = t.comment.match(/(([A-Za-z\u4E00-\u9FA5]+)-)?([A-Za-z\u4E00-\u9FA5]+)(-(\d+))?/);
                    let group = items[2];
                    let tname = items[3];
                    let maxid = items[5];
                    t.cnname = tname;
                    if (group) {
                        let f = menus.find(m => m.title == group);
                        if (!f) {
                            f = {title: group, menus: []};
                            menus.push(f);
                        }
                        t.htmldir = group;
                        f.menus.push({title: `${tname}（${t.name}）`, maxid: maxid, table: t})
                    } else {
                        t.htmldir = t.comment.replace(/(.+?)(-\d+)/, "$1");
                        menus.push({title: `${tname}（${t.name}）`, maxid: maxid, table: t})
                    }
                });
                menus.sort((o1, o2) => {
                    let n1 = o1.menus ? o1.menus.length : 0;
                    let n2 = o2.menus ? o2.menus.length : 0;
                    return n2 - n1;
                });
                return menus;
            }
        },
        mounted() {
            setTimeout(() => {
                let tabnav = document.querySelector(".el-tabs__nav-scroll");
                tabnav.style.padding = '10px';
                let div = document.createElement("div");
                div.innerText = "演示数据库表（DEMO_TABLE）";
                div.id = "tablediv";
                div.style.padding = '10px 0px';
                tabnav.append(div);
            }, 50)
        },
        methods: {
            show(table) {
                if (table == this.t) {
                    return;
                } else {
                    this.t = table;
                }
                if (table.hasHtml == undefined) {
                    axios.get("/easy/" + table.htmldir + "/index.html").then(res => {
                        table.hasHtml = true;
                    }).catch(res => {
                        table.hasHtml = false;
                    });
                }
                axios.get("/easy/columns?table=" + table.name).then(res => {
                    this.columns = res.data;
                });
                tablediv.innerText = table.cnname + "（" + table.name + "）";
            },
            hrtdStyle() {
                return {padding: '2px'};
            },
            cp(path) {
                path = location.origin + "/easy/" + path;
                copy(path);
                this.$message("已复制：" + path);
            },
            backup(table) {
                axios.get(table + "/backup").then(res => {
                    if (res.data.code) {
                        this.$message(res.data.msg);
                    } else {
                        this.$alert(res.data.msg);
                    }
                });
            },
            doMenu(index) {
                this.ac.tab = "表数据";
                this.show(this.tables.find(t => t.name == index));
            },
            openUrl(e) {
                let url;
                if (typeof e == 'string') {
                    url = e;
                } else {
                    if (this.t.name == 'demo_table') return;
                    url = e.target.href;
                }
                if (url.indexOf("save") > 0 || url.indexOf("remove") > 0) {
                    this.$alert("你是认真的吗？别手贱！");
                } else {
                    open(url, '_blank');
                }
            },
            downGroup(menu) {
                this.$confirm('请确认是否要打包下载该库？').then(() => {
                    let tables = menu.menus.map(m => m.table.name);
                    if(tables.length<2){
                        tables.push("pub_user");
                    }
                    tables = tables.join(" ");
                    this.openUrl(tables + "/down");
                })
            },
            showIndex(menu){
                this.openUrl(menu.title + "/index.html");
            }
        }
    })
</script>
</body>
</html>

<style>
    html, body, #app, #app > .el-container, .el-aside > .el-container {
        margin: 0px;
        padding: 0px;
        height: 100%;
    }

    body {
        margin-right: 10px;
    }

    #app {
        max-width: calc(100% - 20px);
        margin: auto;
    }

    p {
        padding: 5px 20px;
        margin: 0px;
    }

    p:hover {
        background-color: #eee;
    }

    label {
        display: inline-block;
        width: 6rem;
        font-size: 14px;
        color: #606266;
    }

    label::after {
        content: "：";
    }

    .cline {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    ol > li {
        line-height: 25px;
        font-size: 14px;
    }

    .el-dialog__body {
        padding: 0px 10px 10px;
    }

    li > small {
        font-size: 10px;
        background-color: #00ff0011;
        display: block;
        margin: -2px 50px 5px 10px;
        padding: 3px 5px;
        border-radius: 5px;
        line-height: 17px;
    }

    .el-card__body {
        height: calc(100% - 70px);
        box-sizing: border-box;
    }

    div.el-tabs.el-tabs--top, div.el-tab-pane {
        height: 100%;
    }

    .el-tabs__content {
        height: calc(100% - 55px);
    }

    .el-submenu .cline > span, .el-menu-item > .el-icon-coin {
        font-size: 15px;
        color: rgb(96, 98, 102)
    }

    .el-tabs__nav {
        float: right;
    }

    dl *{
        color: #666
    }

</style>